<script setup lang="ts">
import { logoutUserApi } from '@/services/login'
import { useMemberStore } from '@/stores'
import clearData from '@/utils/component'
import { ref, onUpdated } from 'vue'

const memberStore = useMemberStore() // 本地有缓存的 token 不调用临时 token

// 循环须知条款
const clauseList = [
  { title: '1.账号内无未完成的订单；' },
  { title: '2.账号内无未完成的退款处理；' },
  { title: '3.无处理中的纠纷或投诉等相关事项；' },
  { title: '4.已主动解除和其他网站授权登录或绑定关系；' },
  {
    title:
      '5.注销后您账号内的一切资产和虚拟权益将全部失效且不可恢复，包括但不限于：优惠券、账户余额等；',
  },
  {
    title:
      '6.注销后您账号内的一切信息将全部删除且不可恢复，包括但不限于：订单信息、发票信息、个人信息等。',
  },
]
// 确认后修改按钮颜色 ,并且启动按钮
let isNotarize = ref('icon-ring')
let isColor = ref('#0000001A')
let ifDisabled = ref(true)
let isDisabledColor = ref('#00000080')

// 动态检测 icon 图标，图标改变更新颜色以及开启注销按钮
onUpdated(() => {
  if (isNotarize.value === 'icon-ring') {
    isColor.value = '#0000001A'
    ifDisabled.value = true
    isDisabledColor.value = '#00000080'
  } else {
    isColor.value = '#8ADF4B'
    ifDisabled.value = false
    isDisabledColor.value = '#fff'
  }
})

/**
 * * 点击注销 删除用户数据  跳转页面
 */
function writeOffFn() {
  uni.showModal({
    content: '是否确认注销账号并放弃在麦德范的所有资产和虚拟权益？',
    confirmText: '确认注销',
    confirmColor: '#8ADF4B',
    success: async (success: UniApp.ShowModalRes) => {
      if (success.confirm) {
        const res = await logoutUserApi({ accessToken: memberStore.userInfo!.accessToken })
        if (res.status.slice(-3) === '200') {
          clearData('all')
          setTimeout(() => {
            // uni.showToast({ title: '注销成功', icon: 'none' }) // 跳转后提示用户
            uni.reLaunch({ url: '/pages/index/index' }) // 跳转到 Tab 界面
          }, 300) // 经过 300 毫秒提示用户
        }
      }
    },
  })
}
</script>

<template>
  <view class="cancelAccount">
    <view class="logo_text" hover-class="none"
      ><image class="image_one" src="/static/images/logo.svg" mode="aspectFit" /><image
        class="image_two"
        src="/static/images/logo_text.png"
        mode="aspectFit"
      />
    </view>
    <view class="notice" hover-class="none">注销须知</view>
    <text class="notice_text"
      >很遗憾未能给你提供满意的服务，感谢您一直以来的陪伴。为保证您的账号安全，在申请注销前请您确认一下信息</text
    >
    <view class="clause" v-for="item in clauseList" :key="item.title">{{ item.title }}</view>
    <view
      class="notarize"
      @tap="isNotarize === 'icon-ring' ? (isNotarize = 'icon-checked') : (isNotarize = 'icon-ring')"
      hover-class="none"
    >
      <view class="notarize_icon" :class="isNotarize" :style="{ Color: isColor }"></view>
      <view class="notarize_text"
        >我已确认并知悉注销账号产生的一切后果，并自愿放弃在麦德范的所有资产和虚拟权益</view
      >
    </view>
    <button
      @tap="writeOffFn"
      :disabled="ifDisabled"
      :style="{ backgroundColor: isColor, Color: isDisabledColor }"
      class="applyFor"
    >
      申请注销
    </button>
  </view>
</template>

<style lang="scss">
//
page {
  background-color: $uni-bg-color-grey;
  .cancelAccount {
    margin: 24rpx;
    padding: 32rpx;
    width: 702rpx;
    background-color: #fff;
    .logo_text {
      position: relative;
      margin: 0 auto;
      width: 158rpx;
      height: 146rpx;
      .image_one {
        width: 100rpx;
        height: 88rpx;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
      .image_two {
        margin-top: 44rpx;
      }
    }
    .notice {
      margin-top: 54rpx;
      margin-bottom: 16rpx;
      font-size: 36rpx;
      color: #000;
    }
    .notice_text {
      font-size: 24rpx;
      color: #00000080;
    }
    .clause {
      margin-top: 52rpx;
      font-size: 24rpx;
      color: #000;
    }
    .notarize {
      display: flex;
      align-items: center;
      margin-top: 94rpx;
      padding: 32rpx 0 62rpx 0;
      width: 100%;
      height: 170rpx;
      border-top: 1px solid #0000001a;
      .notarize_text {
        width: 576rpx;
        margin-left: 16rpx;
        font-size: 24rpx;
        color: #00000080;
      }
    }
    .applyFor {
      margin-bottom: 32rpx;
      width: 100%;
      height: 84rpx;
      line-height: 84rpx;
      font-size: 26rpx;
      border-radius: 44rpx;
      color: #00000080;
      background-color: #0000001a;
    }
  }
}
.uni-popup {
  width: 600rpx;
  height: 304rpx;
  border-radius: 16rpx;
  font-size: 32rpx;
  color: #000000e5;
  background-color: #fff;
  .uni-popup-top {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    height: 192rpx;
    border-bottom: 1px solid #ccc;
    padding: 62rpx 60rpx 32rpx;
  }
  .uni-popup-button {
    position: relative;
    height: 112rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .confirm {
      color: $uni-color-motif;
    }
    .line {
      position: absolute;
      top: 1rpx;
      left: 50%;
      width: 1px;
      height: 100%;
      background-color: #ccc;
    }
  }
}
</style>
